<template>
  <view class="drafts" :style="DynamicHeight">
    <up-navbar :title="title" :autoBack="false" placeholder @leftClick="leftClick"></up-navbar>

    <view>
      <view style="padding: 3px 10px;" :style="tabsDynamicHeight">
        <view>
          <scroll-view :refresher-background="'transparent'" :style="tabsDynamicHeight" class="Contact-menu"
            scroll-y="true">
            <view class="draft-container">
              <view v-for="item in DraftList" :key="item.id" class="draft-card">
                <view class="card-content">
                  <!-- 左上角 标题 + 时间 -->
                  <view class="card-header">
                    <view class="title">{{ item.title }}</view>
                    <view class="edit-time">最后编辑 {{ item.update_time }}</view>
                  </view>

                  <!-- 右下角按钮 -->
                  <view class="card-actions">
                    <button class="action-btn edit-btn" @click="handleEdit(item)">编辑</button>
                    <button class="action-btn delete-btn" @click="handleDelete(item)">删除</button>
                  </view>
                </view>
              </view>
              <!-- 加载中提示 -->
              <view v-if="loading" class="loading-text">加载中...</view>

              <!-- 没有更多数据提示 -->
              <view v-if="noMore" class="no-more-text">没有更多数据了</view>

              <view v-if="errLoading" class="no-more-text">加载数据失败请稍后重试！</view>
              
            </view>
          </scroll-view>
        </view>
      </view>
    </view>


    <up-modal :show="memberModal" :title="memberTitle" :content="memberContent" show-cancel cancel-text="取消"
      confirm-text="确定" @confirm="memberConfirm" @cancel="memberModal = false" showCancelButton="true"
      showConfirmButton="true"></up-modal>
  </view>
</template>

<script>
import { useUserStore } from '@/pinia-store/user'
import { mapStores } from 'pinia'
import apply from "@/apis/cloud/apply.js";
export default {
  name: 'drafts',
  data () {
    return {
      DynamicHeight: {},
      height: 0,
      tabsDynamicHeight: {},
      keyword: '', // 搜索关键字
      userInfo: {}, // 用户信息
      messageList: [], // 最近消息列表 
      imInfo: {},
      originMessageList: [], // 原始消息列表
      memberModal: false,
      memberTitle: '',
      memberContent: '',
      isRefreshing: false,
      DraftList: [],
      sonID: '',
      id: '',
      title: '草稿箱',
      loading:false,
      noMore: false,
      errLoading:false
    }
  },
  computed: {
    ...mapStores(useUserStore),
  },
  async onLoad (option) {
    this.sonID = option.id;
    this.getDraftLists()
  },
  created () {
    // 获取APP用户信息
    this.userInfo = this.userStore.user;

    this.height = (uni.getSystemInfoSync().windowHeight || uni.getSystemInfoSync().screenHeight) || 0

    this.DynamicHeight = {
      height: `${this.height}px`,
      overflowY: 'hidden'
    }
    // #ifdef APP-PLUS

    this.tabsDynamicHeight = {
      height: `${this.height - 83}px`,
      overflowY: 'hidden'
    }
    // #endif

    // #ifdef H5
    this.tabsDynamicHeight = {
      height: `${this.height - 51}px`,
      overflowY: 'hidden'
    }
    // #endif

  },
  methods: {
    // 编辑
    handleEdit (value) {
      uni.navigateTo({
        url: `/pages/apply/form/index?id=${value.formId}&draftId=${value.id}`
      });
    },
    // 删除
    async handleDelete (value) {
      this.id = value.id
      this.memberTitle = `提示`
      this.memberContent = `确定删除${value.title}`
      this.memberModal = true
    },
    // 获取草稿箱数据 
    async getDraftLists () {
      uni.showLoading({
        title: '加载中...'
      });
      this.loading = true
      try {
        await apply.ApplygetDraftLists({
          formId: this.sonID
        }).then((res) => {
          if (res.status == 1) {

            this.DraftList = res.data
            this.title = `草稿箱 (${res.count})`
            if (res.count == 0) {
              this.noMore = true
            }
            uni.hideLoading();
          } else {
            this.noMore = true
            uni.hideLoading();
            uni.showToast({
              title: res.msg || "获取失败，请重试",
              icon: "error",
            });
          }
          this.loading = false
        }).catch((err) => {
          this.noMore = false
          this.errLoading = false
          this.loading = false
          uni.showToast({
            title: err || "获取失败，请重试",
            icon: "error",
          });
        })
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: "获取失败，请重试",
          icon: "error",
        });
      }
    },
    async memberConfirm () {
      uni.showLoading({
        title: '正在删除...'
      });
      try {
        await apply.ApplydelDraft({
          draftId: this.id
        }).then(async (res) => {
          this.memberModal = false
          if (res.status == 1) {
            await uni.hideLoading();
            await uni.showToast({
              title: res.msg || "删除成功",
              icon: "success",
            });

            setTimeout(() => {
              this.getDraftLists()
            }, 200)
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.msg || "删除失败，请重试",
              icon: "error",
            });
          }
        })
      } catch (error) {

        this.memberModal = false
        uni.hideLoading();
        uni.showToast({
          title: "删除失败，请重试",
          icon: "error",
        });
      }

    },
    // 返回
    leftClick () {
      uni.navigateBack()
    }
  }
}
</script>


<style lang="scss" scoped>
.drafts {
  width: 100%;
  background-color: #f2f2f6;



  .Contact-menu {
    .draft-container {
      .draft-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
        overflow: hidden;

        .card-content {
          padding: 14px 16px;
          position: relative;
          min-height: 90px; // 保证空间够放按钮

          .card-header {
            .title {
              font-size: 15px;
              font-weight: 600;
              color: #333;
              margin-bottom: 6px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .edit-time {
              font-size: 12px;
              color: #999;
            }
          }

          .card-actions {
            position: absolute;
            bottom: 12px;
            right: 12px;
            display: flex;
            gap: 8px;

            .action-btn {
              padding: 4px 12px;
              font-size: 13px;
              border-radius: 16px;
              border: none;
              outline: none;
              color: #fff;
            }

            .edit-btn {
              background-color: #2d8cf0; // 蓝色
            }

            .delete-btn {
              background-color: #ff4d4f; // 红色
            }
          }
        }
      }
    }
  }


  /* 加载中和无更多数据提示 */
  .loading-text,
  .no-more-text {
    margin-top: 20rpx;
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 28rpx;
  }


}
</style>
